<!-- 管理员:课程考核管理:题库和在线考试管理:在线考试 -->
<template>
  <div style="width:100% !important;padding:20px;">
    <div>
      <el-row type="flex"
              align="middle">
        <el-form inline="true"
                 label-suffix="：">
          <el-form-item label="学期">
            <el-select v-model="queryForm.semester"
                       size="mini"
                       placeholder="请选择"
                       style="width:100px;">
              <el-option v-for="item in semesterArray"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="系">
            <el-select v-model="queryForm.semester"
                       size="mini"
                       placeholder="请选择"
                       style="width:100px;">
              <el-option v-for="item in semesterArray"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryForm.semester"
                       size="mini"
                       placeholder="请选择"
                       style="width:100px;">
              <el-option v-for="item in semesterArray"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button plain
                       size='mini'
                       icon="el-icon-search"
                       type="primary"
                       style="width:70px;">查询</el-button>
            <el-button plain
                       size='mini'
                       icon="el-icon-circle-plus-outline"
                       type="warning"
                       style="width:130px;"
                       @click="onBtnAddNewOnlineTestClickHandl">添加在线考试</el-button>
            <el-button plain
                       size='mini'
                       icon="el-icon-delete"
                       type="danger"
                       style="width:100px;">删除计划</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table :data="tableData"
                border
                class="table-data"
                row-class-name="dun-row-class"
                cell-class-name="dun-cell-class"
                header-row-class-name="dun-header-row-class"
                header-cell-class-name="dun-header-cell-class"
                :cell-style="{ borderColor: '#004ca7'}"
                :header-cell-style="{ borderColor: '#004ca7', backgroundColor: '#eef1f9'}">
        <el-table-column type="selection"
                         width="55"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="考试课程"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="考试编号"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="培养层次"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="考试班级"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="开始时间"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="结束时间"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="状态"
                         align="center" />
        <el-table-column prop="clazzName"
                         label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="12">
                <el-button :plain=true
                           size="mini"
                           type="primary"
                           style="width:70px;height:28px;"
                           @click="onBtnReviewClickHandler"
                           icon="el-icon-view">查 看</el-button>
              </el-col>
              <el-col :span="12">
                <el-button :plain=true
                           @click="onModifyClassClickHandler()"
                           size="mini"
                           type="success"
                           style="width:70px;height:28px;"
                           icon="el-icon-edit">修 改</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagineDescPane">
        当前共找到 {{ resultPagin.totalCount }} 条记录，当前显示 {{ resultPagin.start }} - {{ resultPagin.end }} 条。
      </div>
      <div class="pagineBtnPane">
        <el-button style="width:80px;"
                   size='mini'>＜ 上一页</el-button>
        <el-button size='mini'>1</el-button>
        <el-button size='mini'>…</el-button>
        <el-button size='mini'>30</el-button>
        <el-button size='mini'>…</el-button>
        <el-button size='mini'>60</el-button>
        <el-button style="width:80px;"
                   size='mini'>下一页 ＞</el-button>
        <span style="display:inline-block;width:40px;"></span>
        前往
        <el-input size='mini'
                  style="display:inline-block;width:40px;" /> 页
      </div>
    </div>
    <el-dialog :title="clazzDialog.dialogTitle"
               :visible.sync="clazzDialog.dialogVisible"
               :close-on-click-modal=false
               :show-close=false
               :center=true
               :close-on-press-escape=false
               width="70%">
      <el-form label-position="right"
               label-width="10px"
               label-suffix="：">
        <table style="width:100%;border-collapse:separate;border-spacing:1px;background-color:#95b4db;"
               class="el-table--fit el-table--border table-data">
          <tr>
            <td class="form-label"><span>培养层次：</span></td>
            <td class="form-item"
                colspan="3">
              <el-select size="mini"
                         v-model="clazzDialog.xq"
                         placeholder="请选择">
                <el-option v-for="item in xqList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="form-label"><span>考试课程：</span></td>
            <td class="form-item">
              <el-input size="mini" />
            </td>
            <td class="form-label"><span>考试编号：</span></td>
            <td class="form-item">
              <el-input size="mini" />
            </td>
          </tr>
          <tr>
            <td class="form-label"><span>考试类型：</span></td>
            <td class="form-item">
              <el-input size="mini" />
            </td>
            <td class="form-label"><span>考试班级：</span></td>
            <td class="form-item">
              <el-input size="mini" />
            </td>
          </tr>
          <tr>
            <td class="form-label"><span>试卷类型：</span></td>
            <td class="form-item">
              <el-input size="mini" />
            </td>
            <td class="form-label"><span>试卷编号：</span></td>
            <td class="form-item">
              <el-input size="mini" />
            </td>
          </tr>
          <tr>
            <td class="form-label"><span>考试人数：</span></td>
            <td class="form-item">
              <el-input size="mini" />
            </td>
            <td class="form-label"><span>报考人数：</span></td>
            <td class="form-item">
              <el-input size="mini" />
            </td>
          </tr>
          <tr>
            <td class="form-label"><span>考试开始时间：</span></td>
            <td class="form-item">
              <el-date-picker v-model="clazzDialog.startDate"
                              type="date"
                              size="mini"
                              style="width:18vh;"
                              placeholder="选择日期">
              </el-date-picker>
              <span style="display:inline-block;width:4vh;"></span>
              <el-time-select size="mini"
                              style="width:15vh;"
                              v-model="clazzDialog.startTime"
                              :picker-options="{
        start: '08:00',
        step: '00:10',
        end: '20:30'
      }"
                              placeholder="选择时间">
              </el-time-select>
            </td>
            <td class="form-label"><span>考试结束时间：</span></td>
            <td class="form-item">
              <el-date-picker v-model="clazzDialog.endDate"
                              type="date"
                              size="mini"
                              style="width:18vh;"
                              placeholder="选择日期">
              </el-date-picker>
              <span style="display:inline-block;width:4vh;"></span>
              <el-time-select size="mini"
                              style="width:15vh;"
                              v-model="clazzDialog.endTime"
                              :picker-options="{
        start: '08:00',
        step: '00:10',
        end: '20:30'
      }"
                              placeholder="选择时间">
              </el-time-select>
            </td>
          </tr>
        </table>
      </el-form>
      <div slot="footer">
        <el-button plain
                   style="width:100px;height:28px;"
                   type="warning"
                   @click="clazzDialog.dialogVisible = false">保存</el-button>
        <span style="display:inline-block;width:80px;"></span>
        <el-button plain
                   style="width:100px;height:28px;"
                   type="danger"
                   @click="clazzDialog.dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      semesterArray: [
        { label: '2021下', value: '2021下' },
        { label: '2022上', value: '2022上' },
      ],
      queryForm: {
        semester: '',
      },
      resultPagin: {
        totalCount: 200,
        currentPage: 3,
        perPageCount: 50,
        start: 51,
        end: 100,
      },
      tableData: [{}, {}, {}],
      clazzDialog: {
        dialogTitle: '添加在线考试',
        dialogVisible: false,
        startDate: '',
        startTime: '',
        endDate: '',
        endTime: '',
      },
    }
  },
  methods: {
    onModifyClassClickHandler() {
      this.clazzDialog.dialogVisible = true
    },
    onBtnReviewClickHandler: function () {
      this.$router.push({
        path: '/admin/courseAssessment/questionExamination/onlineTest/review',
      })
    },
    onBtnAddNewOnlineTestClickHandl: function () {
      this.clazzDialog.dialogVisible = true
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../courseAssessment.less';
</style>
<style lang="less" scoped>
.pagineDescPane {
  padding: 10px 0px 0px 0px;
  font-size: 14px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  color: #004ca7;
}
.pagineBtnPane {
  text-align: right;
  padding: 10px;
  font-size: 14px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  color: #004ca7;
}
.pagineBtnPane > button {
  color: #004ca7;
  width: 30px;
  height: 28px;
  padding-left: 0px;
  padding-right: 0px;
  border: 1px solid #004ca7;
}
td.form-label {
  background-color: #edf2f9;
  color: #004ca7;
  font-size: 16px;
  font-weight: bold;
  line-height: 50px;
  width: 20%;
  text-align: center;
}
td.form-item {
  background-color: #ffffff;
  color: #004ca7;
  font-size: 16px;
  line-height: 50px;
  width: 30%;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}
@import '../../courseAssessmentScoped.less';
</style>
